<div [class]="model.cssClasses.root" #contentElement>
  <img
    *ngIf="model.renderedMode === 'image'"
    [visible]="!!model.locImageLink.renderedHtml && !model.contentNotLoaded"
    [class]="model.getImageCss()"
    [attr.src]="model.locImageLink.renderedHtml"
    [attr.alt]="model.altText || model.title"
    [attr.width]="model.renderedWidth"
    [attr.height]="model.renderedHeight"
    [style]="{ objectFit: model.imageFit,  width: model.renderedStyleWidth, height: model.renderedStyleHeight }"
    (load)="model.onLoadHandler()"
    (error)="model.onErrorHandler()"
  /><video
    controls
    *ngIf="model.renderedMode === 'video'"
    [visible]="!!model.locImageLink.renderedHtml && !model.contentNotLoaded"
    [class]="model.getImageCss()"
    [attr.src]="model.locImageLink.renderedHtml"
    [attr.width]="model.renderedWidth"
    [attr.height]="model.renderedHeight"
    [style]="{ objectFit: model.imageFit,  width: model.renderedStyleWidth, height: model.renderedStyleHeight }"
    (loadedmetadata)="model.onLoadHandler()"
    (error)="model.onErrorHandler()"
  ></video>
  <iframe
    *ngIf="model.renderedMode === 'youtube'"
    [class]="model.getImageCss()"
    [attr.src]="model.locImageLink.renderedHtml | safeResourceUrl"
    [attr.width]="model.renderedWidth"
    [attr.height]="model.renderedHeight"
    [attr.title]="model.renderedAltText"
    [style]="{ objectFit: model.imageFit,  width: model.renderedStyleWidth, height: model.renderedStyleHeight }"
    ></iframe>
    <div *ngIf="!model.locImageLink.renderedHtml || model.contentNotLoaded" [class]="model.cssClasses.noImage">
      <svg [iconName]="model.cssClasses.noImageSvgIconId" [size]="48" sv-ng-svg-icon></svg>
    </div>
</div>